const doms = {
    audio: document.querySelector('audio'),
    word: document.querySelector('.word-content'),
}
dataList.forEach(item => {
    const li = document.createElement('li')
    li.textContent = item.word
    doms.word.appendChild(li)
})
const maxoffset = +document.querySelector('.word-content').clientHeight - document.querySelector('.word-box').clientHeight
/**
 * 
 * 判断应到哪句歌词
 */
function findIndex() {
    return dataList.findIndex(item => item.time > doms.audio.currentTime) - 1
}
/** 
*计算偏移量
**/
function offset() {
    let offset = +(findIndex() + 1) * doms.word.children[0].clientHeight - document.querySelector('.word-box').clientHeight / 2
    if (offset < 0) {
        offset = 0
    }
    console.log(maxoffset)

    if (offset > maxoffset) {
        offset = maxoffset
    }
    console.log(+document.querySelector('.word-content').clientHeight - document.querySelector('.word-box').clientHeight)
    doms.word.style.transform = `translateY(-${offset}px)`
}
doms.audio.addEventListener('timeupdate', () => {
    offset()
    if (document.querySelector('.active')) {
        document.querySelector('.active').classList.remove('active')
    }
    doms.word.children[findIndex()].classList.add('active')

})
